<template>
    <div class="hot-goods mx-2">
        <div class="bg-white pb-[10px]">
            <div class="flex justify-between items-center hot_goods rounded-t-xl">
                <div class="text-[18px] text-white ml-[7px]">热门商品</div>
                <div class="more mr-[7px]">更多 ></div>
            </div>
            <div class="hot_good" v-for="item in getData" :key="item.image">
                <div class="flex mt-[18px]">
                    <el-image :src="getImageUrl(item.image)" style="width: 100px; height: 90px" />
                    <div class="ml-[7px] w-full">
                        <div>平和红心蜜柚</div>
                        <div class="mt-[12px]">
                            <text class="price">￥4.2</text
                            ><text class="canal_price"
                                >/个 <text class="line-through">￥14.9</text></text
                            >
                            <span class="discounts-bg ml-[5px]">
                                <span class="discounts">省10元</span>
                            </span>
                        </div>
                        <div class="mt-[12px]">大小均匀 ｜ 26人已下单</div>
                        <div class="flex justify-between">
                            <div class="limit">限购 5 份</div>

                            <!-- 加入购物车按钮 -->
                            <div class="btn">
                                <button class="flex-1 shopCart">加入购物车</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import type options from './options'
import useAppStore from '@/stores/modules/app'

const { getImageUrl } = useAppStore()
type OptionsType = ReturnType<typeof options>
const props = defineProps({
    content: {
        type: Object as PropType<OptionsType['content']>,
        default: () => ({})
    },
    styles: {
        type: Object as PropType<OptionsType['styles']>,
        default: () => ({})
    }
})
const getData = computed(() => {
    const { data } = props.content
    return data
})
</script>

<style lang="scss" scoped>
.hot_goods {
    background-color: #33d192;
    height: 56px;

    .more {
        width: 55px;
        height: 24px;
        border-radius: 100px;
        background-color: rgba(255, 255, 255, 0.4);
        color: rgba(255, 255, 255, 1);
        text-align: center;
        line-height: 24px;
    }
}

.discounts-bg {
    background: #ffe5bc;
    border-radius: 10px;

    .discounts {
        font-weight: 400;
        color: #f79c0c;
        padding: 2px 8px;
    }
}

.hot_good {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 0 10px;
}

.price {
    color: rgba(255, 0, 0, 1);
    font-size: 18px;
}

.canal_price {
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
}

.limit {
    font-size: 12px;
    color: #666;
    margin-top: 9px;
}
.btn {
    .shopCart {
        border-radius: 44px;
        padding: 5px 10px;
        line-height: 21px;
        font-size: 13px;
        color: #fff;
        background: #33d192;
    }
}
</style>
